<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
  </head>
  <body>
    <div
      style="width: 400px; height: 300px; border: 1px solid red"
      id="main"
    ></div>
  </body>
</html>
<script>
  //初始化 echarts实例
  var myChart = echarts.init(document.getElementById('main'))
  //数据及配置
  var option = {
    title: {
      text: 'xxx用户来源',
      subtext: '模拟数据',
      x: 'center',
    },
    tooltip: {},
    legend: {
      orient: 'vertical',
      left: 'right',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '60%',
        center: ['40%', '55%'],
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' },
        ],
      },
    ],
  }
  //使用echarts实例 设置配置及数据
  myChart.setOption(option)
</script>
